<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>类别管理</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="formData"
        :form-title="formTitle"
        @search="search"
        @reset="reset"
      />

      <v-tableBtns
        :table-title="tableTitle"
        :table-data="tableData"
      />

      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        :readable="true"
        :editable="false"
        :deletable="false"
        @read="read"
        @del="del"
      />
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { UploadExcelComponent },
  data() {
    return {
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      formTitle: [
        {
          cn: 'id：',
          en: 'id'
        },
        {
          cn: '组名称：',
          en: 'name'
        }
      ],
      formData: {},
      tableTitle: [
        {
          cn: 'id',
          en: 'id'
        },
        {
          cn: '组名称',
          en: 'name'
        },
        {
          cn: '创建时间',
          en: 'created_at'
        },
        {
          cn: '修改时间',
          en: 'updated_at'
        }
      ],
      tableData: [
        {
          id: 1,
          group_name: '自营账号',
          create_time: '2018-01-12',
          update_time: '2018-02-11'
        }
      ]

    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    getTableList(data) {
      let datas
      if (this.onFilter) {
        datas = { ...data, filter_info: this.filter_info }
      } else {
        datas = data
      }
      this.$get('action/WechatNumber/groups', datas)
        .then(res => {
          const list = res.data.length && res.data
          this.tableData = list || []
        })
    },

    // 搜索
    search() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (origin[key] && key !== 'created_at') {
          data[key] = origin[key]
        } else if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        }
      }

      this.onFilter = true
      this.filter_info = data
      this.getTableList()
    },
    reset() {
      this.onFilter = false
      this.filter_info = {}
      this.getTableList()
    },

    read(val) {
      console.log(val)
      this.$router.push({
        name: 'category.read',
        query: { id: val.row.id },
        params: {
          details: val.row
        }
      })
    },
    del(val) {
      console.log(val)
      this.tableData.splice(val.$index, 1)
    },
    addnew() {
      console.log(1)
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
        .table-menu {
            padding-bottom: 15px;
        }

</style>
